<template>
    <div>
        <!-- Location组件-----{{title}}
        <br>
        {{userinfo.username}}-----{{userinfo.age}} -->



        <h3>Location组件--{{title}} -----{{username}}----{{age}}</h3>
        <br>
        <br>
        <p>provider inject实现父子组件传值的时候，子组件改变数据也会影响父组件</p>
        <input type="text" v-model="username">

       
    </div>
</template>
<script>
// import {reactive, ref, toRefs} from 'vue';

// export default {
//   name:'Location组件',
//   inject:['title','userinfo']
  
// }


import {inject,toRefs} from 'vue'
export default {
  name:'Location组件',
  setup(){
      let title = inject('title')
      let userinfo = inject('userinfo')
      return{
          title,
          ...toRefs(userinfo)
      }
  }
  
}
</script>
